<template>
  <div class="box" id="box">
    <header class="header">
      <!-- 头部 -->
      <img src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png" alt="00" style="width:36px;">
      <div class="search" @click="gosearch">
        <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_search_lightgray.png" alt="" class="searchImg">
        <span>请输入搜索内容</span>
      </div>
    </header>
    <div class="content" id="content">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
       <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
        <van-image
          lazy-load
          :src="item.img"
        />
       </van-swipe-item>
      </van-swipe>
      <!-- 导航列表 -->
      <div class="nav_list">
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/548747b208d49dc822cce9b021ee163e.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>每日上新</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/a779963ae37b08742c9a5d6e4be55bdc.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>小米众筹</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/4126aa196f70ef33b54abd73ad2046a2.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>限时抢购</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/12f8395494d9cbbc879b59f15262d857.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>热销排行</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/007e489051cf6bc0617bae5c39293a90.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>小米自营</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/3545a293f36ebdf09b8832856e3cbec0.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>0元专享</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/7282750c38379dae573ae9d6d8398fe2.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>雷军同款</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/d72416a0e8fe912303f57de39e53ef82.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>生活超市</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/43bf0a61329f003a2929a7d72d42ea4f.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>小米庄园</span>
        </div>
        <div class="nav_list_item">
          <img src="https://img.youpin.mi-img.com/jianyu/cc85267719a91e403e784802b72b454d.png@base@tag=imgScale&h=100&m=1&q=80&w=100" alt="00">
          <span>新人必买</span>
        </div>
      </div>
      <!-- 静态banner -->
      <a href="http://www.baidu.com"><img src="https://img.youpin.mi-img.com/jianyu/da680ed22a0d9e6b99feb73eaab5eb12.png@base@tag=imgScale&h=146&m=1&q=80&w=750" alt="00" class="yushou"></a>
      <!-- 四格海报 -->
      <div class="four_banner">
        <a href="http://baidu.com"><img src="https://img.youpin.mi-img.com/youpinoper/a5ba85ff764b403831b752e4b5a54978.png@base@tag=imgScale&h=187&w=348" alt="00"></a>
        <a href="http://baidu.com"><img src="https://img.youpin.mi-img.com/youpinoper/4b4a2c3c7e2e30a6f441534f52a04913.jpg@base@tag=imgScale&h=187&w=348" alt="00"></a>
        <a href="http://baidu.com"><img src="https://img.youpin.mi-img.com/youpinoper/6f60bc32e4618f3ec154198151fce187.jpg@base@tag=imgScale&h=187&w=348" alt="00"></a>
        <a href="http://baidu.com"><img src="https://img.youpin.mi-img.com/youpinoper/992f44c6f40a3535c5f438b87edee399.jpg@base@tag=imgScale&h=187&w=348" alt="00"></a>
      </div>
      <!-- 商品列表 -->
      <h5>精品推荐</h5>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <Prolist :prolist="prolist"></Prolist>
      </van-list>
      <div class="backtop" v-if="flag" @click="backtop">
        <img src="https://img.youpin.mi-img.com/static/weex_images/v1/m/up_top.png" alt="00">
      </div>
    </div>
  </div>
</template>

<script>
import { getProlist, getBannerlist } from '@/api'
import Prolist from '@/components/prolist'
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image, Grid, GridItem, NavBar, Icon, Search, List } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Image)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Search)
Vue.use(List)
export default {
  data () {
    return {
      prolist: [],
      bannerlist: [],
      loading: false,
      finished: false,
      flag: false,
      count: 1
    }
  },
  components: {
    Prolist
  },
  mounted () {
    getProlist().then(res => {
      console.log(res.data)
      this.prolist = res.data.data
    })
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
    // 监听滚动实现返回顶部
    document.getElementById('content').addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    backtop () {
      // document.getElementById('content').scrollTop = 0
      // 使用计时器
      const timer = setInterval(() => {
        // console.log(document.getElementById('content').scrollTop)
        document.getElementById('content').scrollTop -= 200
        if (document.getElementById('content').scrollTop <= 100) {
          document.getElementById('content').scrollTop = 0
          clearInterval(timer)
        }
      }, 30)
    },
    handleScroll () {
      console.log('滚动')
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('content').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    onLoad () {
      console.log('可以加载数据了')
      this.loading = true // 表示开始加载了
      getProlist({ limit: 10, count: this.count }).then(res => {
        this.loading = false // 表示结束加载了
        // 如果没有数据
        if (res.data.len === 0) { // res.data.data.length
          this.finished = true // 表示数加载完毕了
        } else {
          // 有数据 拼接数据  ---   合并数组
          // concat [...this.prolist, ...res.data.data]
          this.prolist = [...this.prolist, ...res.data.data]
          // 页面加1
          this.count += 1
        }
      })
    },
    gosearch () {
      console.log('去搜索页面')
      // 编程式跳转 页面
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background:#f4f4f4;
}
.content {
  background:#f4f4f4;
}
.header {
  width:100%;
  background:#845d32;
  img {
    width:40px;
    float: left;
    margin:11px;
  }
  .search {
    float: left;
    height:30px;
    width:70%;
    background:white;
    border-radius: 15px;
    margin:11px;
    .searchImg {
      width:20px;
      margin:5px 10px;
    }
    span {
      color:#999;
      display: inline-block;
      line-height: 30px;
    }
  }
}
.nav_list {
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .nav_list_item {
    width:17%;
    margin:10px 1%;
    img {
      display: block;
      margin:0 auto;
      width:50px;
    }
    span {
      display:block;
      width:100%;
      text-align: center;
      font-size: 0.8em;
      color:black;
      margin-top: 5px;
    }
  }
}
.yushou {
  width:100%;
}
.four_banner {
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  a {
    display: block;
    width:45%;
    margin:6px;
    img {
      width:100%;
    }
  }
}
h5 {
  margin: 10px;
  text-align: center;
}
.backtop {
  position: fixed;
  bottom:50px;
  right:-55px;
  img {
    width: 50%;
  }
}
</style>
